<template>
  <div class="organ_box">
    <div class="top_left_shadow"></div>
    <div class="bottom_rigth_shadow"></div>
    <div class="imgs_box">
      <!-- 接受父组件传来的图片参数 -->
      <div :style="imgWidth" v-for="(value, index) in imgsArr" :key="index">
        <img
          :src="imgsArr[index].imgSrc"
          :alt="imgsArr[index].imgAlt"
          :title="imgsArr[index].imgTitle"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
    name: 'OrganImages',
    //imgsArr参数为父组件传来的图片参数，格式如下：
    /*[
        {
         imgSrc:'',
         imgAlt:'',
         imgTitle:'',
        },...
      ] */
    props: ['imgsArr'],
    setup(props) {
        let imgsArr = props.imgsArr
        let imgWidth = ref('')
        //根据图片数量计算所占空间大小
        imgWidth =  'width:' + 100 / imgsArr.length + '%;'

        return {
            imgsArr,
            imgWidth
        }
    }
}
</script>

<style scoped lang="css">
.organ_box {
  position: relative;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 600px;
  box-sizing: border-box;
}
.organ_box .top_left_shadow,
.organ_box .bottom_rigth_shadow,
.organ_box .imgs_box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%);
}
.organ_box .top_left_shadow {
  border-radius: 50px;
  box-shadow: -58px -58px 90px 5px rgb(255, 255, 255);
  background-color: transparent;
}
.organ_box .bottom_rigth_shadow {
  border-radius: 50px;
  box-shadow: 67px 67px 90px 5px #252525;
  background-color: transparent;
}
.organ_box .imgs_box {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border-radius: 50px;
}
.organ_box .imgs_box div {
  height: 100%;
  transition: width 1s ease 0s;
}
.organ_box .imgs_box div:hover {
  width: 170% !important;
  transition: width 1s ease 0s;
}
.organ_box .imgs_box div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>